<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/index.css">
    <style>
        
    </style>
</head>
<body>
    <main>
        <div id="main-conter">
            <div id="articles"></div>
        </div>
        
    </main>
   

    <script src="./js/jquery-1.12.4.js"></script>
    <script src="./js/article.js"></script>

    <script>
        function showArticle(length){
            for(let index=0;index<length;index++){
                let article='<div class="article"><img src="'+articleData[index].image+'" alt=""><div class="text"><p>'+articleData[index].title+'</p><div class="info"><img src="'+articleData[index].img+'" alt=""><span>'+articleData[index].name+'</span><span>'+articleData[index].date+'</span> <div class="praise"><span><em class="iconfont icon-zhuanfa"></em>'+articleData[index].forwarding+'</span>|<span><em class="iconfont icon-xinxi"></em>'+articleData[index].comments+'</span>|<span><em class="iconfont icon-zan addP"></em>'+articleData[index].praise+'</span> </div></div></div> </div>';
                $("#articles").append(article);
            }
        }
        showArticle(2);
        let i=1;
        // 加载的个数
        let a=2;
        $(document).scroll(function(){
            let cHeight=document.documentElement.clientHeight;
            let sTop=$(document).scrollTop();
            let timer;
            // 判断 i小于表内的长度，且第i篇文章到顶部的高度小于可视区域+滚动的高度
            if(i<articleData.length-1 && $(".article").eq(i).offset().top<cHeight+sTop){
                i=i+a;
                timer=setTimeout(function(){
                    showArticle(a);
                },1000)
            }
            if(i>=articleData.length && flag){
                clearTimeout(timer);
                flag=false;
            }
            
        })
    </script>
</body>
</html>